<template>
    <Dashboard :menu="menu">
        <el-form label-width='110px' :model='formItem' :rules="rules" ref="formItem">
            <el-form-item label='使用条件' required>
                <el-col :span="7">
                    <el-form-item prop="limit_price">
                        <span>满</span>
                        <el-input-number v-model="formItem.limit_price" :min="0" controls-position="right" style="margin:0 10px"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item prop="price">
                        <span>减</span>
                        <el-input-number v-model="formItem.price" :min="0" controls-position="right" style="margin:0 10px"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label='配送费'>
                <el-switch v-model='formItem.free_delivery'></el-switch>
            </el-form-item>
            <el-form-item label='状态'>
                <el-switch v-model='formItem.status'></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click="ok('formItem')">确定</el-button>
                <el-button @click='back'>返回</el-button>
            </el-form-item>
        </el-form>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        let checkPrice = (rule, value, callback) => {
            if (!value || value >= this.formItem.limit_price) {
                return callback(new Error("请正确输入价格"));
            } else {
                callback();
            }
        };
        let checkLimitPrice = (rule, value, callback) => {
            if (!value || value <= this.formItem.price) {
                return callback(new Error("请正确输入价格"));
            } else {
                callback();
            }
        };
        return {
            menu: [
                {
                    name: "满减活动",
                    icon: "icon-manjian",
                    sub: [
                        {
                            name: "满减列表",
                            url: "/shop/full"
                        }
                    ]
                }
            ],
            formItem: {
                id: 0,
                price: "",
                limit_price: "",
                free_delivery: true,
                status: true
            },
            rules: {
                price: [
                    {
                        required: true,
                        validator: checkPrice,
                        trigger: "change"
                    }
                ],
                limit_price: [
                    {
                        required: true,
                        validator: checkLimitPrice,
                        trigger: "change"
                    }
                ]
            }
        };
    },
    async asyncData({ app, query }) {
        let data = {};
        if (query.id) {
            let config_data = await app.$axios.$get(
                `/api/shop/home/shop/plugin/full/info?id=${query.id}`
            );
            if (config_data && config_data.data) {
                data.formItem = config_data.data;
                data.formItem.status = data.formItem.status ? true : false;
                data.formItem.free_delivery = data.formItem.free_delivery
                    ? true
                    : false;
            }
            return data;
        } else {
            data.formItem = {
                id: 0,
                price: "",
                limit_price: "",
                free_delivery: true,
                status: true
            };
            return data;
        }
    },
    methods: {
        ok(formItem) {
            this.$refs[formItem].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            let data = {
                id: this.formItem.id,
                price: this.formItem.price,
                limit_price: this.formItem.limit_price,
                free_delivery: this.formItem.free_delivery,
                status: this.formItem.status
            };
            const res = await this.$axios.$post(
                "/api/shop/home/shop/plugin/full/add",
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success({
                    type: "success",
                    message: "保存成功"
                });
                this.$router.push({
                    path: "/shop/full"
                });
            }
        },
        back() {
            this.$router.push({
                path: "/shop/full"
            });
        }
    }
};
</script>
